<template>
    <panel-item :field="field">
        <div slot="value">
            <template v-if="field.value">
                <div class="card relative border border-lg border-50 overflow-hidden px-0 py-0" :style="style">
                    <img :src="field.value" class="block">
                </div>
                <div class="mt-2">{{ field.value }}</div>
            </template>
            <span v-else>&mdash;</span>
        </div>
    </panel-item>
</template>

<script>
export default {
    props: ['resource', 'resourceName', 'resourceId', 'field'],

    computed: {
        style() {
            if (this.field.maxWidth) {
                return {
                    'max-width': `${this.field.maxWidth}px`,
                    'min-height': '30px',
                }
            } else {
                return {
                    'min-height': '30px',
                }
            }
        },
    },
}
</script>
